<template>
	<view>
		<view class="new_item"    v-for="(it,index) in list"   @click="navigeterDetail(it)"    :key="it.id" >
			  <image :src="it.img_url"></image>
		      <view  class="right">
				     <view class="title">
						   {{it.title}}
					 </view>
					 <view class="info">
					 	  <text>发表时间：{{it.add_time  | formateDate}}</text>
						   <text>浏览：{{it.click}} </text>
					 </view>
			  </view>
		</view>
		
	</view>
</template>
<script>
	export  default {
		
		data(){
			return {
				
			}
		},
		
		props:['list'],
		
		filters:{
			formateDate(date){
				const   NewDate = new Date(date)
				const  year = NewDate.getFullYear()
				const  month = (NewDate.getMonth() + 1).toString().padStart(2,0)
				const  day = NewDate.getDay().toString().padStart(2,0)
				
				return   year + '年'+ month + '月' + day
				
			}
		},
		methods:{
			navigeterDetail(it){
				this.$emit('itemClick',it.id)
			}
		}
	}
	
</script>
<style  lang="scss">
	      .new_item{
	      			  display: flex;
	      			  padding: 10rpx  20rpx;
	      			  border-bottom: 1px   solid  $shop-color;
	      			    image{
	      					/* width: 200rpx; */
	      					/* 因为。设置width为200rx，页面显示图片，的宽度，并不为 100px ，所以我们用 min-width: 200rpx;max-width: 200rpx;做处理*/
	      					min-width: 200rpx;
	      					max-width: 200rpx;
	      					height: 150rpx;
	      				}
	      				.right{
	      					margin-left: 15rpx;
	      					display: flex;
	      					/* 使第二个view盒子靠底部 */
	      					justify-content: space-between;
	      					flex-direction: column;
	      					.title{
	      						font-size: 30rpx;
	      					}
	      					.info{
	      						font-size: 24rpx;
	      					    text:nth-child(2){
	      							margin-left:30rpx;
	      						 }
	      							
	      						}
	      					}
	      				}
	      			  
</style>